<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>法务服务平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <link rel="stylesheet" href="./css/style.default.css" id="theme-stylesheet">
  </head>
  <body>

  <iframe src="../navbar.html" style="position:absolute;margin: auto; left: 0; right: 0; top: 0; border: medium none;"
          width="1375px" height="100px" ></iframe>

    <div class="page login-page"  style="margin-top: 7%">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>欢迎注册</h1>
                  </div>
                  
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="col-lg-6 bg-white">

              <div class="form d-flex align-items-center">
                <form action="/login/registerSubmit" onsubmit="return checkVcode()" name="myForms" method="post">
                <div class="content">
                    <div class="form-group">
                      <input id="register-username" class="input-material" type="text" name="loginName" placeholder="请输入用户名/姓名" >
								      <div class="invalid-feedback">
								        	用户名必须在6~11位之间
								      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-password" class="input-material" type="password" name="password" placeholder="请输入密码"   >
                    	<div class="invalid-feedback">
								        	密码必须在6~12位之间
								      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-passwords" class="input-material" type="password" name="checkPassword" placeholder="确认密码"   >
                    	<div class="invalid-feedback">
								        	两次密码必须相同 且在6~12位之间
								      </div>
                    </div>
                  <div class="form-group">
                    普通用户<input type="radio" name="type" value="普通用户">
                  </div>
                  <div class="form-group">
                    <input id="register-email" class="input-material" type="text" name="email" placeholder="请输入Email"   >
                    <button id="sendNewEmail" type="button" class="btn btn-primary" onclick="check($sendNewEmail,60)" onsubmit="">获取验证码</button>
                    <div class="invalid-feedback">
                      输入电子邮箱格式不对
                    </div>
                  </div>

                  <div class="form-group">
                    <input id="register-vCode" class="input-material" type="text" name="vCode" placeholder="请输入验证码"   >
                    <div class="invalid-feedback">
                      输入电子邮箱格式不对
                    </div>
                  </div>

                    <div class="form-group">
                      <input type="submit" id="regbtn" class="btn btn-primary" value="注册">
                    </div>
                  <small>已有账号?</small><a href="./login.html" class="signup">&nbsp;登录</a>
                </div>
                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src=./js/jquery.min.js"></script>
    <script src="./js/jquery-3.4.1.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>

      var $sendNewEmail=$("#sendNewEmail");
      function time(o,wait) {
        var $this = $(o);
        if (wait == 0) {
          $this.css('pointer-events', '');
          $this.css("background","#549ff2");
          $this.html("发送验证码");
          wait = 60;
        } else {
          $this.css("pointer-events","none");
          $this.css("background","#999999");
          $this.html("重新发送(" + wait + ")");
          wait--;
          setTimeout(function() {time(o,wait)}, 1000)
        }
      }

      function  check(o,wait) {
        var name = checkLoginName();
        if (name==false)
            return false;
        var pwd = checkPassword();
          if (pwd==false)
              return false;
        var eM = checkEmail();
          if (eM==false)
              return false;

        if (name&&pwd&&eM){   //执行发送邮箱验证码
          var email = document.getElementById("register-email").value;
          var loginName = document.getElementById("register-username").value;
          $.ajax({
            url:"/center/sendEmail",
            type:"post",
            data:{"loginName":loginName,"email":email},
            async:false,
            success:function(result){
              if(result==true){
                time(o,wait);
              }
            }
          });
          return true;
        }
        else
          return false;
      }

      function checkLoginName() {
        var loginName=document.getElementById("register-username").value;
        var bools = false;
        if(loginName.length<6){
          alert("用户名长度不能低于6位");
          return false;
        }
        $.ajax({
          url:"/login/checkLoginName",
          type:"post",
          data:{"loginName":loginName},
          async:false,
          success:function(result){
            if(result.code==200){
              alert("该用户名已存在");
            }else {
              bools = true;
            }
          }
        });
        return bools;
      }

      function checkPassword() {
        var password=document.getElementById("register-password").value;
        var checkPassword=document.getElementById("register-passwords").value;
        if (password==""||password==null){
          alert("密码不能为空");
          return false;
        }
        if (password.length<6){
          alert("密码长度不能低于6位");
          return false;
        }
        if (password!=checkPassword){
          alert("两次输入密码不一致");
          return false;
        }
        return true;
      }

        function checkVcode() {
        var vCode=document.getElementById("register-vCode").value;
        var loginName = document.getElementById("register-username").value;
        var password = document.getElementById("register-password").value;
        var type = document.forms['myForms']['type'].value;
        var email = document.getElementById("register-email").value;
        var flagPass = false;
        //验证码验证
        if (loginName==""||loginName==null){
          alert("登录名不能空");
          return false;
        }
        if (password==""||password==null){
          alert("密码不能空");
          return false;
        }
        if (type==""||type==null){
          alert("用户类型不能空");
          return false;
        }
        if (email==""||email==null){
          alert("email不能空");
          return false;
        }
        if (vCode.length!=4){
          alert("请输入4位验证码");
          return false;
        }

        $.ajax({
          url:"/login/checkVcode",
          type:"post",
          data:{"loginName":loginName,"vCode":vCode},
          async:false,
          success:function(result){
              if (result.code==200){
                flagPass=true;
            }else if(result.code==100){
                flagPass=false;
            }else {
              alert("不能注册！");
                flagPass=false;
            }
          },
        });
        if (flagPass==false){
          alert("验证码不正确");
        }
        return flagPass;
      }

      function  checkEmail() {
        var email=document.getElementById("register-email").value;
        var bools = false;
        if (email==""||email==null){
          alert("email为空");
          return false;
        }
        $.ajax({
          url:"/login/checkEmail",
          type:"post",
          data:{"email":email},
          async:false,
          success:function(result){
            if(result.code==200){
              alert("邮箱已被注册");
            }else {
              bools = true;
            }
          }
        });
        return bools;
      }


    	$(function(){
    		/*错误class  form-control is-invalid
    		正确class  form-control is-valid*/
    		var flagName=false;
    		var flagPas=false;
    		var flagPass=false;
    		/*验证用户名*/
    		var name,passWord,passWords;
    		$("#register-username").change(function(){
    			name=$("#register-username").val();
    			if(name.length<6||name.length>11){
    				$("#register-username").removeClass("form-control is-valid")
    				$("#register-username").addClass("form-control is-invalid");
    				flagName=false;
    			}else{
    				$("#register-username").removeClass("form-control is-invalid")
    				$("#register-username").addClass("form-control is-valid");
    				flagName=true;
    			}
    		})
    		/*验证密码*/
    		$("#register-password").change(function(){
    			passWord=$("#register-password").val();
    			if(passWord.length<6||passWord.length>12){
    				$("#register-password").removeClass("form-control is-valid")
    				$("#register-password").addClass("form-control is-invalid");
    				flagPas=false;
    			}else{
    				$("#register-password").removeClass("form-control is-invalid")
    				$("#register-password").addClass("form-control is-valid");
    				flagPas=true;
    			}
    		})
    		/*验证确认密码*/
    		$("#register-passwords").change(function(){
    			passWords=$("#register-passwords").val();
    			if((passWord!=passWords)||(passWords.length<6||passWords.length>12)){
    				$("#register-passwords").removeClass("form-control is-valid")
    				$("#register-passwords").addClass("form-control is-invalid");
    				flagPass=false;
    			}else{
    				$("#register-passwords").removeClass("form-control is-invalid")
    				$("#register-passwords").addClass("form-control is-valid");
    				flagPass=true;
    			}
    		})


    		$("#regbtn").click(function(){
    			if(flagName&&flagPas&&flagPass){
    				localStorage.setItem("name",name);
    				localStorage.setItem("passWord",passWord);
    				// location="login.html"
    			}else{
    				if(!flagName){
    					$("#register-username").addClass("form-control is-invalid");
    				}
    				if(!flagPas){
    					$("#register-password").addClass("form-control is-invalid");
    				}
    				if(!flagPass){
    					$("#register-passwords").addClass("form-control is-invalid");
    				}
    			}
    		})
    	})




    </script>
  </body>
</html>